路由表: 

[
    {
        path: '/路径',
        component: 组件名
        children: [
            {
                path: '/路径',
                component: 组件名 
            }
        ]
    }
]

react组件的懒加载

const 组件名 = React.lazy(()=> import('/组件的路径'))

v6

useNavigate 用于编程式导航

const navigate = useNavigate()

navigate('/目标路径?name=123', {
    replace: true,
    state: 数据
})

useLocation 获取state数据

const location = useLocation()

location.state

useSearchParams()
const [query,setQuery] = useSearchParams()

query.get('键')

useParams() 获取路由参数

const params = useParams()

useRoutes 生成Routes和Route 

redex 
当有多个组件,需要用到同一份数据,这时可以将这个数据,存储到redux中集中管理,避免了组件间通讯的复杂操作

使用: 

1. 下载
npm i redux 

2. store(管理了数据),reducer(具体修改数据的角色),action(描述需求的对象)
创建store 
import {createStore} from 'redux'

// 执行时机: 1. 创建store时执行,是为了初始化数据. 2. store.dispatch(action) 是为了修改数据
function reducer(state=初始值, action){

    switch(action.type){
        case 'xxx':

            return {
                ...state,
                属性: 目标值
            }
        default: 
            return state
    }

}

const store = createStore(reducer)

获取redux数据 store.getState()

监听redux数据变化  store.subscribe(()=>{
    一旦数据变化,函数会执行
})

修改数据 store.dispatch(action对象)



